<template>
  <div id="cesiumContainer">
    <router-view v-if="ready"></router-view>
  </div>
</template>

<script lang="ts">
import { onMounted, ref, defineComponent, provide } from 'vue'
import { Viewer } from 'cesium'

export default defineComponent({
  name: 'CesiumContainer',
  setup () {
    const ready = ref<boolean>(false)
    onMounted(() => {
      /* eslint no-new: */
      const viewer: Viewer = new Viewer('cesiumContainer')
      provide<Viewer>('Viewer', viewer)
      ready.value = true
    })
    return { ready }
  }
})
</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
